<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row>
      <el-col :span="24">
        <div class="myHeadeTitle">计划模板基本信息</div>
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板名称 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划模板名称" v-model="detail.name"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板编号 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划模板编号" v-model="detail.typeid"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板对象类型 :
      </el-col>
      <el-col :span="8">
        <template>
          <el-select v-model="modelValue" placeholder="请选择计划模板对象模型">
            <el-option
              v-for="item in modelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板内任务周期 :
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="cycleVlaue" placeholder="请选择周期">
            <el-option
              v-for="item in cycleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="1" class="myLeftMsg">
        进行 
      </el-col>
      <el-col :span="3">
        <el-input placeholder="多少次的任务" v-model="detail.frequency"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板内任务执行期限 :
      </el-col>
      <el-col :span="10">
        <template>
          <el-time-select
            placeholder="00:00"
            v-model="startTime"
            class="myWidth_200px"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
            }">
          </el-time-select>
          <el-time-select
            placeholder="24:00"
            v-model="endTime"
            class="myWidth_200px"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: startTime
            }">
          </el-time-select>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="myHeadeTitle">计划模板内任务执行项目</div>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        执行项目 :
      </el-col>
      <el-col :span="21">
        <el-button class="myBgGreen" @click="newEditDialogVisible = true"> 新增 </el-button>
        <el-button class="myBgGreen"> 批量删除 </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableDataList"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="100">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop=""
              label="执行项目">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template scope="scope">
                <el-button class="look" type="text" size="small">编辑</el-button> |
                <el-button class="look" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="myHeadeTitle">计划模板状态及备注</div>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板状态 :
      </el-col>
      <el-col :span="3" class="myLineHeight_45px">
        <el-radio-group v-model="on">
          <el-radio label="启用"></el-radio>
          <el-radio label="禁用"></el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        备注 :
      </el-col>
      <el-col :span="21">
        <el-input type="textarea"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20" :offset="3">
        <el-button class="myBgGreen">新增</el-button>
        <el-button class="myBgGreen">取消</el-button>
        <el-button class="myBgGreen">关闭</el-button>
      </el-col>
    </el-row>



    <!--新增/编辑执行项目弹窗 start-->
    <el-dialog title="新增/编辑执行项目" class="myRoleDialog" :visible.sync="newEditDialogVisible">
      <div>主体内容</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="newEditDialogVisible = false">新增/保存</el-button>
      </div>
    </el-dialog>
    <!--编辑执行项目弹窗 end-->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after,.myBorder:before,.myBorder:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myBorder{
    border: 1px solid #bfcbd9;
    width: 182px;
    height: 40px;
  }
  .myNoBorder{
    border:none !important;
  }
  .myWidth_100px{
    width: 100px;
    float: left;
    line-height: 36px;
    padding: 0 10px;
    background: none;
  }
  .myWidth_200px{
    width: 150px;
  }
  .myWidth_35px{
    width: 40px;
    color: #000 !important;
    float: left;
    border-left: 1px solid #bfcbd9 !important;
    border-radius: 0 !important;
    text-align: center;
    height: 38px;
    background: none;
  }
  .el-button span{
    color: #000 !important;
  }
  .myWidth_35px:hover{
    background: #f2f2f2;
  }
  .myLineHeight_45px{
    line-height: 45px;
  }
</style>

<script>
  import {  } from '@/api/maintenanceplan';

  export default {
     data(){
      return{
        modelOptions:[{value: '选项1',label: '设备类型1'}, {value: '选项2',label: '设备类型2'}],
        modelValue:"",
        cycleOptions:[{value: '周期1',label: '每年'},{value: '周期2',label: '每半年'},{value: '周期3',label: '每季度'},{value: '周期4',label: '每月'}],
        cycleVlaue:"",
        modelId:"",
        detail:[],
        tableDataList:[],
        on:"",
        newEditDialogVisible:false,
        startTime: '',
        endTime: ''
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '日常巡检管理';
    },
    methods:{
      handleSelectionChange(){

      } 
    }

  }

</script>  



